<template>
  <div class="statics_container home">
    <!-- 标题 -->
    <TitleIndex @sendTitleInd="getTitleNum" :flag="flag" :tateData="tateData" />
    <!-- end -->
    <div class="homeMain">
      <!-- 营业额统计 -->
      <TurnoverStatistics :turnoverdata="turnoverData" />
      <!-- end -->
      <!-- 用户统计 -->
      <UserStatistics :userdata="userData" />
      <!-- end -->
    </div>
    <div class="homeMain homecon">
      <!-- 订单统计 -->
      <OrderStatistics :orderdata="orderData" :overviewData="overviewData" />
      <!-- end -->
      <!-- 销量排名TOP10 -->
      <Top :top10data="top10Data" />
      <!-- end -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import {
  get1stAndToday,
  past7Day,
  past30Day,
  pastWeek,
  pastMonth,
} from '/@/utils/formValidate'
import {
  getDataOverView, //数据概览
  getTurnoverStatistics,
  getUserStatistics,
  getOrderStatistics,
  getTop,
} from '/@/api/index'
// 组件
// 标题
import TitleIndex from './components/titleIndex.vue'
// 营业额统计
import TurnoverStatistics from './components/turnoverStatistics.vue'
// 用户统计
import UserStatistics from './components/userStatistics.vue'
// 订单统计
import OrderStatistics from './components/orderStatistics.vue'
// 排名
import Top from './components/top10.vue'

let overviewData = ref({}) as any
let flag = ref(2)
let tateData = ref([]) as any
let turnoverData = ref({}) as any
let userData = ref({})
let orderData = ref({
  data: {},
}) as any
let top10Data = ref({})

onMounted(() => {
  //init(flag)
  getTitleNum(2);
})

// 获取基本数据
const init = (begin: any, end: any) => {
  nextTick(() => {
    getTurnoverStatisticsData(begin, end)
    getUserStatisticsData(begin, end)
    getOrderStatisticsData(begin, end)
    getTopData(begin, end)
  })
}

// 获取营业额统计数据
const getTurnoverStatisticsData = async (begin: any, end: any) => {
  const res = await getTurnoverStatistics({ begin: begin, end: end })
  if (res.code == 1) {
    turnoverData.value = {
      dateList: res.data.dateList.split(','),
      turnoverList: res.data.turnoverList.split(',')
    }
  } else {
    turnoverData.value = {}
  }
}

// 获取用户统计数据
const getUserStatisticsData = async (begin: any, end: any) => {
  const res = await getUserStatistics({ begin: begin, end: end })
  if (res.code == 1) {
    userData.value = {
      dateList: res.data.dateList.split(','),
      totalUserList: res.data.totalUserList.split(','),
      newUserList: res.data.newUserList.split(','),
    }
  } else {
    userData.value = {}
  }
}

// 获取订单统计数据
const getOrderStatisticsData = async (begin: any, end: any) => {
  const res = await getOrderStatistics({ begin: begin, end: end })
  if (res.code == 1) {
    orderData.value = {
      data: {
        dateList: res.data.dateList.split(','),
        orderCountList: res.data.orderCountList.split(','),
        validOrderCountList: res.data.validOrderCountList.split(','),
        //orderCompletionRateList: res.data.orderCompletionRateList.split(','),
      },
      totalOrderCount: res.data.totalOrderCount,
      validOrderCount: res.data.validOrderCount,
      orderCompletionRate: res.data.orderCompletionRate
    }
  } else {
    orderData.value = {}
  }
}

// 获取排行数据
const getTopData = async (begin: any, end: any) => {
  const res = await getTop({ begin: begin, end: end })
  if (res.code == 1) {
    top10Data.value = {
      nameList: res.data.nameList ? res.data.nameList.split(',').reverse() : [],
      numberList: res.data.numberList ? res.data.numberList.split(',').reverse() : []
    }
  } else {
    top10Data.value = {}
  }
}

// 获取当前选中的tab时间
const getTitleNum = (data: any) => {
  switch (data) {
    case 1:
      tateData.value = get1stAndToday()
      break
    case 2:
      tateData.value = past7Day()
      break
    case 3:
      tateData.value = past30Day()
      break
    case 4:
      tateData.value = pastWeek()
      break
    case 5:
      tateData.value = pastMonth()
      break
  }
  init(tateData.value[0], tateData.value[1])
}
</script>

<style lang="scss" scoped>
.statics_container {
  width: 100%;
}

.homeMain {
  display: flex;
  margin-top: 20px;
}
</style>
